<template>
    <div>
        <div class="map"  id="allmap" v-loading="loading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading">
            <baidu-map
                    :center="center" :zoom="zoom"
                    scroll-wheel-zoom class="baidu_map"
                    @ready="handler"
                    ak="janBYEEeFjLuX5Q1XWTkXUhYC9zaZt7L">
                <bm-marker top :position="center?center:'宁波'" animation="BMAP_ANIMATION_BOUNCE"
                           :icon="{url:require('../assets/img/position.png'),size: {width: 25, height: 25}}"
                           :title="'中心点'">
                </bm-marker>
                <bml-lushu
                        @stop="reset"
                        :autoView="true"
                        :rotation="false"
                        :speed="5000"
                        :path="mapListPoints"
                        :icon="icon"
                        :play="play"
                        v-if="mapListPoints[0]"
                >
                </bml-lushu>
                <bm-polyline
                        v-if="mapListPoints[0]"
                        :path="mapListPoints?mapListPoints:[]" strokeColor="#133650" :stroke-opacity="0.7" :stroke-weight="3"></bm-polyline>
                <bm-geolocation
                        @locationSuccess="locationSuccess"
                        @locationError="locationError"
                        :locationIcon="{url:require('../assets/img/now_pos.png'),size: {width: 31, height:31}}"
                        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
                        :showAddressBar="true"
                        :autoLocation="true"></bm-geolocation>
                <!--                一般病害-->
                <div v-if="NormalList[0]">
                    <bm-marker @click="Norclick(item)" top v-for="(item,index) in NormalList" :key="index" :position="item.address" :title="item.name"
                               :icon="{url:require('../assets/img/normal1.png'),size: {width: 35, height:35}}"
                    >
                        <bm-info-window style="width: 420px" :show="item.showFlag" @close="NorClose(item)">
                            <span class="dge_title">病害名称</span>
                            <el-tag class="type_tag">{{item.name}}</el-tag>
                            <el-form label-position="left">
                                <el-form-item>
                                        <span slot="label">
                                            <i class="el-icon-folder"></i>
                                         病害类型
                                        </span>
                                    <span style="color: #0a3d62">{{item.type}}</span>
                                </el-form-item>
                                <el-form-item>
                                     <span slot="label">
                                        <i class="el-icon-data-line"></i>
                                    <span style="color: #99a9bf;">病害等级</span>
                                    </span>
                                    <el-tag class="normal">
                                        一般
                                    </el-tag>
                                    （共存在<span style="color: #FF9900">{{item.number}} </span>个）
                                </el-form-item>
                                <el-form-item>
                                        <span slot="label">
                                            <i class="el-icon-collection-tag"></i>
                                         病害所在行政区
                                        </span>
                                    <span style="color: #0a3d62">{{item.city}}</span>
                                </el-form-item>
                                <el-form-item>
                                        <span slot="label">
                                            <i class="el-icon-collection-tag"></i>
                                         修复情况
                                        </span>
                                    <span v-if="OneDgeForm.status === 0" style="color: #8F2139">未修复</span>
                                    <span v-else style="color: #00a199">已修复</span>                                </el-form-item>
                                <el-button @click="showDgeInfo(item)" style="color: #133650;float: right" type="text" icon="el-icon-info">【详细信息】</el-button>
                            </el-form>

                        </bm-info-window>
                    </bm-marker>
                </div>
                <!--                中等病害-->
                <div v-if="ImportantList[0]">
                    <bm-marker @click="Impclick(item)" top v-for="(item,index) in ImportantList" :key="index" :position="item.address" :title="item.name"
                               :icon="{url:require('../assets/img/important1.png'),size: {width: 35, height:35}}"
                    >
                        <bm-info-window style="width: 420px" :show="item.showFlag" @close="ImpClose(item)">
                            <span class="dge_title">病害名称</span>
                            <el-tag class="type_tag">{{item.name}}</el-tag>
                            <el-form label-position="left">
                                <el-form-item>
                                        <span slot="label">
                                            <i class="el-icon-folder"></i>
                                         病害类型
                                        </span>
                                    <span style="color: #0a3d62">{{item.type}}</span>
                                </el-form-item>
                                <el-form-item>
                                         <span slot="label">
                                            <i class="el-icon-data-line"></i>
                                        <span style="color: #99a9bf;">病害等级</span>
                                        </span>
                                    <el-tag class="important">
                                        中等
                                    </el-tag>
                                    （共存在<span style="color: #8F2139">{{item.number}} </span>个）
                                </el-form-item>
                                <el-form-item>
                                        <span slot="label">
                                            <i class="el-icon-collection-tag"></i>
                                         病害所在行政区
                                        </span>
                                    <span style="color: #0a3d62">{{item.city}}</span>
                                </el-form-item>
                                <el-form-item>
                                        <span slot="label">
                                            <i class="el-icon-collection-tag"></i>
                                         修复情况
                                        </span>
                                    <span v-if="OneDgeForm.status === 0" style="color: #8F2139">未修复</span>
                                    <span v-else style="color: #00a199">已修复</span>                                </el-form-item>
                                <el-button @click="showDgeInfo(item)" style="color: #133650;float: right" type="text" icon="el-icon-info">【详细信息】</el-button>
                            </el-form>

                        </bm-info-window>
                    </bm-marker>
                </div>
                <!--                严重病害-->
                <div v-if="SeriousList[0]">
                    <bm-marker @click="Serclick(item)" top v-for="(item,index) in SeriousList" :key="index" :position="item.address" :title="item.name"
                               :icon="{url:require('../assets/img/serious1.png'),size: {width: 35, height:35}}"
                    >
                        <bm-info-window style="width: 420px" :show="item.showFlag" @close="SerClose(item)">
                            <span class="dge_title">病害名称</span>
                            <el-tag class="type_tag">{{item.name}}</el-tag>
                            <el-form label-position="left">
                                <el-form-item>
                                        <span slot="label">
                                            <i class="el-icon-folder"></i>
                                         病害类型
                                        </span>
                                    <span style="color: #0a3d62">{{item.type}}</span>
                                </el-form-item>
                                <el-form-item>
                                         <span slot="label">
                                            <i class="el-icon-data-line"></i>
                                        <span style="color: #99a9bf;">病害等级</span>
                                        </span>
                                    <el-tag class="serious">
                                        严重
                                    </el-tag>
                                    （共存在<span style="color: #8F2100">{{item.number}} </span>个）
                                </el-form-item>
                                <el-form-item>
                                        <span slot="label">
                                            <i class="el-icon-collection-tag"></i>
                                         病害所在行政区
                                        </span>
                                    <span style="color: #0a3d62">{{item.city}}</span>
                                </el-form-item>
                                <el-form-item>
                                        <span slot="label">
                                            <i class="el-icon-collection-tag"></i>
                                         修复情况
                                        </span>
                                    <span v-if="OneDgeForm.status === 0" style="color: #8F2139">未修复</span>
                                    <span v-else style="color: #00a199">已修复</span>                                </el-form-item>
                                <el-button @click="showDgeInfo(item)" style="color: #133650;float: right" type="text" icon="el-icon-info">【详细信息】</el-button>
                            </el-form>

                        </bm-info-window>
                    </bm-marker>
                </div>
            </baidu-map>
<!--            按行政区查找-->
            <div class="ByCity">
                <el-dropdown placement="bottom" @command="selectCity">
                    <el-button split-button class="sel_btn">
                        {{this.NowCity}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu class="list" slot="dropdown">
                        <el-dropdown-item v-for="(item,index) in cityList"
                                          v-text="item.city"
                                          :command="item.city"
                                          :key="index"></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="right">
                <el-date-picker
                        style="box-shadow: 0 4px 8px #0a3d62"
                        align="center"
                        value-format="yyyyMM"
                        v-model="NowDate"
                        type="month"
                        placeholder="选择查询日期">
                </el-date-picker>
                <el-button @click="getDgeInfo" class="sel_btn">
                    <el-icon class="el-icon-search"></el-icon>
                </el-button>
            </div>
        </div>

        <!--        展示单个隐患信息-->
        <el-dialog
                width="42.9%"
                :title="this.OneDgeForm.name"
                :visible.sync="ToshowDge"
                @close="DgeDialogClosed">
            <!--      内容主体区域-->
            <svg class="icon_add" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <path d="M17.0001364,3.01980663e-14 L23,6 L23,20.4 C22.9942313,22.3861232 21.3854111,23.9946449 19.3993318,24 L19.3993318,24 L4.5999182,24 C2.61996318,24 1,22.38 1,20.4 L1,20.4 L1,3.59999999 C1,1.62 2.61996321,3.01980663e-14 4.5999182,3.01980663e-14 L4.5999182,3.01980663e-14 L17.0001364,3.01980663e-14 Z M14.20045,2.00024999 L4.5999182,2.00024999 C3.717617,2.0031314 3.0030859,2.71767874 3.00020456,3.59999999 L3.00020456,3.59999999 L3.00020456,20.4 C3.00267649,21.2824916 3.71744668,21.997278 4.5999182,21.99975 L4.5999182,21.99975 L19.3993318,21.99975 C20.2819259,21.9972801 20.9969119,21.2826129 20.9997954,20.4 L20.9997954,20.4 L20.9997954,8.79975001 L15.8001636,8.79975001 C14.9178624,8.7968686 14.2033313,8.08232127 14.20045,7.20000001 L14.20045,7.20000001 L14.20045,2.00024999 Z M13.7992091,16.2 C14.3594464,16.2 14.7996864,16.64025 14.7996864,17.19975 C14.7996864,17.75925 14.3594464,18.1995 13.7992091,18.1995 L13.7992091,18.1995 L6.99986365,18.1995 C6.44037635,18.1995 6.00013635,17.75925 6.00013635,17.19975 C6.00013635,16.64025 6.44037635,16.2 6.99986365,16.2 L6.99986365,16.2 Z M17.0001364,11.8005 C17.5596236,11.8005 17.9998636,12.24075 17.9998636,12.80025 C17.9998636,13.35975 17.5596236,13.8 17.0001364,13.8 L17.0001364,13.8 L6.99986365,13.8 C6.73392126,13.8026324 6.47810444,13.6981474 6.29004556,13.5100842 C6.10198669,13.3220211 5.99750407,13.0661984 6.00008779,12.80025 C5.99750407,12.5343016 6.1019867,12.2784789 6.29004557,12.0904158 C6.47810445,11.9023527 6.73392127,11.7978677 6.99986365,11.8005 L6.99986365,11.8005 Z M16.2006545,2.00024999 L16.2006545,6.39974999 C16.2006545,6.62064748 16.3795034,6.79983635 16.6003954,6.80025001 L16.6003954,6.80025001 L20.9997954,6.80025001 L16.2006545,2.00024999 Z" id="形状结合" fill="#0a3d62" fill-rule="nonzero"></path>
            </svg>
            <span class="form_til">基本信息</span>
            <el-card
                    v-loading="toloading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    style="margin-top: 10px; margin-bottom: 12px">
                <div>
                    <span class="form_smtil">
                        <i class="el-icon-position"></i>
                     地址:
                    </span>
                    <span style="color: #0a3d62">{{this.address}}</span>
                </div>
                <el-col :span="12">
                    <span class="form_smtil">
                        <i class="el-icon-collection-tag"></i>
                     病害分类:
                    </span>
                    <span style="color: #0a3d62">{{this.OneDgeForm.type}}</span>
                </el-col>
                <el-col :span="12">
                     <span class="form_smtil">
                         <i class="el-icon-data-line"></i>
                         病害等级:
                     </span>
                    <el-tag v-if="this.OneDgeForm.number <=5" class="normal">
                        一般
                    </el-tag>
                    <el-tag v-else-if="this.OneDgeForm.number > 10" class="serious">
                        严重
                    </el-tag>
                    <el-tag v-else class="important">
                        中等
                    </el-tag>
                </el-col>
                <el-col :span="13">
                    <span class="form_smtil">
                        <i class="el-icon-alarm-clock"></i>
                     最新修复时间:
                    </span>
                    <span style="color: #0a3d62">{{this.OneDgeForm.updateTime}}</span>
                </el-col>
                <el-col :span="11">
                    <span class="form_smtil">
                        <i class="el-icon-house"></i>
                     所在行政区
                    </span>
                    <span style="color: #0a3d62">{{this.OneDgeForm.city}}</span>
                </el-col>
                <br>
                <el-col>
                    <span class="form_smtil">
                        <i class="el-icon-info"></i>
                     病害描述
                    </span>
                    <p style="color: #969896">该病害面积大约 <span style="color: #0a3d62"> {{this.OneDgeForm.square}}</span>,
                        目前修复情况
                        <span v-if="OneDgeForm.status === 0" style="color: #8F2139">未修复</span>
                        <span v-else style="color: #0b3e63">已修复</span>
                    </p>
                </el-col>
            </el-card>

            <!--            现场照片-->
            <svg class="icon_add" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <path d="M21,2.1 L3,2.1 C1.704,2.1 0.66,3.144 0.66,4.44 L0.66,19.56 C0.66,20.856 1.704,21.9 3,21.9 L21,21.9 C22.296,21.9 23.34,20.856 23.34,19.56 L23.34,4.44 C23.34,3.144 22.296,2.1 21,2.1 Z M3,3.9 L21,3.9 C21.3,3.9 21.54,4.14 21.54,4.44 L21.54,15.216 L16.572,10.248 C16.308,9.984 15.96,9.84 15.6,9.84 C15.24,9.84 14.88,9.984 14.628,10.248 L8.52,16.356 L6.252,14.088 C5.712,13.548 4.836,13.548 4.296,14.088 L2.448,15.936 L2.448,4.44 C2.46,4.14 2.7,3.9 3,3.9 Z M21,20.1 L3,20.1 C2.7,20.1 2.46,19.86 2.46,19.56 L2.46,18.492 L5.28,15.672 L7.884,18.276 C8.052,18.444 8.28,18.54 8.52,18.54 C8.76,18.54 8.988,18.444 9.156,18.276 L15.6,11.832 L21.54,17.772 L21.54,19.56 C21.54,19.86 21.3,20.1 21,20.1 L21,20.1 Z" id="形状" fill="#0a3d62"></path>
                <path d="M5.28,9.06 C5.28,9.59589839 5.56589837,10.0910889 6.02999999,10.3590381 C6.49410161,10.6269873 7.06589839,10.6269873 7.53000001,10.3590381 C7.99410163,10.0910889 8.28,9.59589839 8.28,9.06 C8.28,8.23157288 7.60842712,7.56 6.78,7.56 C5.95157288,7.56 5.28,8.23157288 5.28,9.06 L5.28,9.06 Z" id="路径" fill=""></path>
            </svg>
            <span class="form_til">现场照片</span>
            <el-row>
                <div v-if="imglist[0]">
                    <el-col :span="8">
                        <svg class="Xc_pic" viewBox="0 0 102 68" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <path d="M21.1470999,3.91629139 L3.61938683,3.91629139 C2.99339708,3.91629139 2.47787611,4.43797648 2.47787611,5.07145122 L2.47787611,19.40537 C2.47787611,20.0388447 2.99339708,20.5605298 3.61938683,20.5605298 L21.1593742,20.5605298 C21.785364,20.5605298 22.300885,20.0388447 22.300885,19.40537 L22.300885,5.07145122 C22.2886106,4.43797648 21.785364,3.91629139 21.1470999,3.91629139 Z M20.5456588,17.8651569 C20.5456588,17.5794722 20.5456588,18.7843163 19.5514398,18.7843163 L4.98183512,18.7843163 C4.22082797,18.7843163 4.22082797,18.1632626 4.22082797,18.1632626 L4.22082797,17.0081028 C4.22082797,17.0081028 4.45403984,16.6603127 4.68725171,16.4243123 L8.1363325,12.9339907 C8.1363325,12.9339907 8.29589852,12.80978 8.41864161,12.80978 C8.553659,12.80978 8.72549933,12.9464118 8.72549933,12.9464118 L10.7875832,15.0579943 C10.9348749,15.2070471 11.1680868,15.2070471 11.3153785,15.0579943 L15.7709526,10.4994603 C15.7709526,10.4994603 15.9305186,10.3628285 16.1146333,10.3628285 C16.2987479,10.3628285 16.4583139,10.5118814 16.4583139,10.5118814 L20.079235,14.1760981 C20.3124469,14.3996774 20.5456588,14.7350464 20.5456588,14.7350464 L20.5456588,17.8651569 L20.5456588,17.8651569 Z" id="形状" fill="#DCE0E6"></path>
                            <path d="M5.45132743,8.07735099 C5.45132743,8.75866457 6.01331995,9.30119205 6.69026549,9.30119205 C7.37998358,9.30119205 7.92920354,8.74604765 7.92920354,8.07735099 C7.92920354,7.39603741 7.36721102,6.85350993 6.69026549,6.85350993 C6.01331995,6.85350993 5.45132743,7.39603741 5.45132743,8.07735099 L5.45132743,8.07735099 Z" id="路径" fill="#FFFFFF"></path>
                        </svg>
                    </el-col>
                    暂无
                </div>
                <div v-else>
                    <br>
                    <div >
                        <el-col class="img_pad" :span="8">
                            <viewer :images="imglist" class="XC_pic">
                                <img :src="src" style="width:100%;">
                            </viewer>
                        </el-col>
                    </div>
                </div>
            </el-row>

        </el-dialog>
    </div>
</template>

<script>
    import { BaiduMap,  BmMarker,  BmInfoWindow, BmGeolocation,BmPolyline,BmlLushu} from 'vue-baidu-map/components/'
    export default {
        name: "Map",
        components: {
            BaiduMap,  BmMarker,  BmInfoWindow,BmGeolocation, BmPolyline,BmlLushu
        },
        data(){
            return {
                icon: {
                    url:require('../assets/img/car.png'),
                    size: {width: 32, height: 32},
                    opts: {anchor: {width: 27, height:13}}
                },
                center: '',
                loading: true,
                zoom: 18,
                map: '',
                // 病害列表
                AllDgelist: [],
                // 目前地图上病害信息
                NowDgelist:[],
                // 一般病害
                NormalList:[],
                // 中等病害
                ImportantList: [],
                // 严重病害
                SeriousList: [],
                // 展现病害具体
                ToshowDge: false,
                // 病害具体地址
                address: '',
                // 其中一个病害信息
                OneDgeForm: '',
                NowCity:'鄞州区',
                // 行政区列表
                cityList: [],
            //    目前选择的日期
                Month:'',
                NowDate: '',
                //
                toloading: false,
                imglist: [],
                src:'',
                mapListPoints:[],
                play:true
            }
        },
        // beforeCreate() {
        //     window._bd_share_main = ""
        // },
        // mounted() {
        //     let that =this
        //     that.$nextTick(function () {
        //
        //     })
        // },
        created() {
            this.getNow()
            this.getAllCity()
        },
        methods: {
            reset(){
                this.play = false
            },
            getNow() {
                let date = new Date()
                let month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
                this.NowDate = date.getFullYear() + month
                // console.log(this.NowDate)
                this.getDgeInfo()
            },
            async getDgeInfo() {
                this.loading = true
                // console.log(this.NowCity, this.NowDate)
                let city = this.NowCity
                const {data: res} = await this.$http.get('/newDiseases/getDiseasesByDateCity', {
                    params: {
                        city: city,
                        date: this.NowDate
                    }
                })
                // console.log(res.data)
                if (res.errCode !== 200) {
                    this.NormalList = []
                    this.SeriousList = []
                    this.ImportantList = []
                    this.mapListPoints = []
                    if(res.errMsg === '参数异常'){
                        this.center='宁波'
                        return this.WarningMsg()
                    }
                    this.loading = false
                    return this.$message.error(res.errMsg)
                }
                this.AllDgelist = res.data
                if (this.AllDgelist.length) {
                    this.ResetData(this.AllDgelist)
                } else {
                    this.WarningMsg()
                    this.center='宁波'
                    this.loading = false
                }
            },
            // 获取所有行政区名称
            async getAllCity() {
                const {data: res} = await this.$http.get('/newDiseases/getAllCities')
                if (res.errCode !== 200) {
                    return this.$message.error(res.errMsg)
                }
                this.cityList = res.data
            },
            ResetData(list) {
                var Normal = []
                var Serious = []
                var Important = []
                var Point = []
                list.forEach(function (item) {
                    var lat = item.latitude
                    var lng = item.longitude
                    // console.log(lat, lng)
                    if (item.number <= 5) {
                        Normal.push({
                            address: {lng: lng, lat: lat},
                            type: item.type,
                            id: item.id,
                            number: item.number,
                            city: item.city,
                            square: item.square,
                            status: item.status,
                            filename: item.filename,
                            name: item.name,
                            pictureId: item.pictureId,
                            updateTime: item.updateTime,
                            showFlag: false
                        })
                    } else if (item.number > 5 && item.number <= 10) {
                        Serious.push({
                            address: {lng: lng, lat: lat},
                            type: item.type,
                            id: item.id,
                            number: item.number,
                            city: item.city,
                            square: item.square,
                            status: item.status,
                            filename: item.filename,
                            name: item.name,
                            pictureId: item.pictureId,
                            updateTime: item.updateTime,
                            showFlag: false
                        })
                    } else if (item.number > 10) {
                        Important.push({
                            address: {lng: lng, lat: lat},
                            type: item.type,
                            id: item.id,
                            number: item.number,
                            city: item.city,
                            square: item.square,
                            status: item.status,
                            filename: item.filename,
                            name: item.name,
                            pictureId: item.pictureId,
                            updateTime: item.updateTime,
                            showFlag: false
                        })
                    }
                    Point.push({lng: lng, lat: lat})
                })
                this.NormalList = Normal
                this.SeriousList = Serious
                this.ImportantList = Important
                if (Point[0]) {
                    this.mapListPoints = Point
                    // console.log(this.mapListPoints)
                }

                this.loading = false
                // console.log(this.NormalList)
            },
            handler({BMap, map}) {
                this.loading= true
                let that = this;  // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function(r) {
                    if(r){
                        that.center = {lng: r.longitude, lat: r.latitude};
                    }
                    else{
                        that.center= '宁波'
                    }
                })
                that.zoom = 18
                if(this.mapListPoints[0]){
                    var view = map.getViewport(eval(this.mapListPoints))
                    var mapSize = view.zoom
                    this.center = view.center
                    this.zoom = mapSize
                }
                this.map = BMap
                this.loading = false

            },
            locationSuccess(e) {
                // console.log(e)
                this.center = {
                    lat: e.point.lat,
                    lng: e.point.lng
                }
                // console.log("定位成功")
            },
            locationError() {
                // console.log('fail')
            },
            NorClose(item) {
                item.showFlag = false
            },
            Norclick(item) {
                item.showFlag = true
            },
            SerClose(item1) {
                item1.showFlag = false
            },
            Serclick(item1) {
                item1.showFlag = true
            },
            ImpClose(item2) {
                item2.showFlag = false
            },
            Impclick(item2) {
                item2.showFlag = true
            },
            selectCity(city) {
                // console.log(city)
                this.NowCity = city
                this.getDgeInfo()
            },
            WarningMsg() {
                const h = this.$createElement;
                this.$notify.warning({
                    title: '提示',
                    message: h('p', {style: 'color: teal'}, '该地区暂无病害哦!'),
                    offset: 100,
                    duration: 5000
                });
            },
            // 病害具体信息
            showDgeInfo(dgeInfo) {
                this.ToshowDge = true
                this.getAddressName(dgeInfo.address.lng, dgeInfo.address.lat)
                this.OneDgeForm = dgeInfo
                this.OneDgeForm.updateTime = dgeInfo.updateTime.substring(0, 16)
                let arr = []
                let baseUrl = 'http://47.93.241.187'
                this.src = baseUrl + '/image' + this.OneDgeForm.filename.substring(14)
                arr.push(this.src)
                this.imgstr = arr
                // console.log(this.imgstr)
                this.toloading = false
            },
            DgeDialogClosed() {
                this.ToshowDge = false
            },
            // 根据坐标逆解析地址
            getAddressName(lng, lat) {
                let that = this
                // 创建解析器
                var myGeo = new window.BMap.Geocoder();
                var pt = new window.BMap.Point(lng, lat);// 随便写个经纬度
                myGeo.getLocation(pt, function (result) {
                    // console.log(result);
                    that.address = result.address
                });
            },
        },

    }
</script>

<style scoped>
    .map {
        width: 100%;
        height: 100vh;
    }
    .baidu_map{
        height: 100%;
        width: 100%;
    }
    /deep/.el-form-item__label {
        width: 220px;
        color: #99a9bf;
        margin-left: 40px;
    }
    /deep/ .BMap_pop {
        background: #eeeeee !important;
        border: 2px solid #E4E7ED;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
    }
    /deep/.BMap_top {
        /*background: #009199 !important;*/
    }
    .dge_title{
        color: #133650;
        font-weight: bold;
        font-size: 26px;
        margin-left: 40px;
    }
    /*标签一般*/
    .normal{
        background: #FF9900;
        color: white;
        border-radius: 18px;
        border: 1px solid #FF9990;
    }
    /*标签重要*/
    .important{
        background: #D8262A;
        color: white;
        border-radius: 18px;
        border: 1px solid #D82620;
    }
    /*标签严重*/
    .serious{
        background: #8F2139;
        color: white;
        border-radius: 18px;
        border: 1px solid #8F2100;
    }
    .type_tag{
        background-color: #0c2461;
        color: whitesmoke;
        margin-left: 10px;
    }
    .ByCity{
        position: fixed;
        z-index: 100;
        top: 10vh;
        left: 20px;
    }
    .right{
        position: fixed;
        z-index: 100;
        top: 10vh;
        right: 20px;
    }
    .sel_btn{
        background: #0a3d62;
        color: white;
    }
    .sel_btn:hover, .sel_btn:active, .sel_btn:focus{
        background: #005ba1;
        color: ghostwhite;
    }
    .el-dropdown-menu__item:not(.is-disabled):hover{
        background-color: #d9e0ef !important;
        color: #0a3d62 !important;
    }
    .list{
        height: 160px;
        overflow: auto;
        box-shadow: 1px 2px 4px #99a9bf;
    }
    .icon_add{
        width: 32px;
        height: 32px;
        padding-right: 10px;
        vertical-align:middle;
    }
    .form_til{
        color: #0a3d62;
        font-weight: bold;
        font-size: 25px;
        text-align: center;
    }
    .form_smtil{
        color: #404040;
        font-size: 22px;
        font-weight: bold;
        padding-right: 6px;
        line-height: 48px;
        font-size: 22px;
    }
</style>
